<template>
    <div id="song_checked">
        <div class="container" slot="songinfo">
            <el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" label-width="auto">
                <div class="wrapper">
                    <div style="display: inline-block" class="wrapper-left">
                        <el-form-item label="修改前" class="title"> </el-form-item>

                        <el-form-item label="ID:">
                            <el-input class="w" v-model="form.beforData.id" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="歌手名:">
                            <el-input class="w" v-model="form.beforData.actors.importName" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑名:">
                            <el-input class="w" v-model="form.beforData.tblAlbum.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="歌曲名:">
                            <el-input class="w" v-model="form.beforData.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="全拼:">
                            <el-input class="w" v-model="form.beforData.namePinyinFull" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:">
                            <el-input class="w" v-model="form.beforData.namePinyinShort" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="语言:">
                            <el-select
                                disabled
                                :clearable="true"
                                v-model="form.beforData.language"
                                placeholder="请选择语言"
                                class="handle-select mr10 w"
                            >
                                <el-option
                                    v-for="(item, index) in languages"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="风格:">
                            <el-select
                                :clearable="false"
                                multiple
                                v-model="form.beforData.genre"
                                placeholder=""
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in genres_3"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="歌曲别名:">
                            <el-input class="w" v-model="form.beforData.aliasName" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="子标题:">
                            <el-input class="w" v-model="form.beforData.subtitle" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="词作者:">
                            <el-input class="w" v-model="form.beforData.lyricWriter" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="曲作者:">
                            <el-input class="w" v-model="form.beforData.composer" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="插曲类型：">
                            <el-select disabled :clearable="true" v-model="form.beforData.episodeType" class="handle-select mr10 w">
                                <el-option key="0" label="无" :value="0"></el-option>
                                <el-option key="1" label="配乐" :value="364"></el-option>
                                <el-option key="2" label="片尾曲" :value="365"></el-option>
                                <el-option key="3" label="插曲" :value="366"></el-option>
                                <el-option key="4" label="主题曲" :value="363"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否有伴奏：">
                            <el-select disabled :clearable="true" v-model="form.beforData.accompanyFlag" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否精品：">
                            <el-select disabled :clearable="true" v-model="form.beforData.excellentFlag" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="安全类别：">
                            <el-select disabled :clearable="true" v-model="form.beforData.blackFlag" class="handle-select mr10 w">
                                <el-option key="0" label="白名单" :value="false"></el-option>
                                <el-option key="1" label="黑名单" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="状态：">
                            <el-select disabled :clearable="true" v-model="form.beforData.status" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="试听开始(秒)：">
                            <el-input disabled class="w" v-model="form.beforData.tblListenDownloadModes.start"></el-input>
                        </el-form-item>

                        <el-form-item label="试听结束(秒)：">
                            <el-input disabled class="w" v-model="form.beforData.tblListenDownloadModes.end"></el-input>
                        </el-form-item>

                        <el-form-item label="打标签：">
                            <!-- <el-select disabled :clearable="true" v-model="form.beforData['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->
                            <el-cascader
                                disabled
                                :show-all-levels="true"
                                v-model="form.beforData.tagIds"
                                class="w"
                                :options="tagList"
                                :props="{
                                    emitPath: false,
                                    multiple: true,
                                    checkStrictly: true,
                                    value: 'value',
                                    label: 'label',
                                    children: 'children'
                                }"
                                @change="handlechange"
                            >
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>

                        <el-form-item label="关联MV">
                            <!-- <div style="overflow: auto; height: 164px; margin-top: 10px;"> -->
                            <!-- <p
                                    v-if="form.beforData.relaResultForms && form.beforData.relaResultForms.length > 0"
                                    style="height: 32px; display: flex; justify-content: space-between; padding-right: 10px; margin-bottom: 1px; font-size: 12px;"
                                    v-for="(item, index) in form.beforData.relaResultForms"
                                    :key="index"
                                >
                                    <span style=" background: rgba(0,0,0,.1);flex: 3; text-align: left;">{{ item.songId }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 4; text-align: center; margin: 0 10px 0">{{
                                        item.songName
                                    }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 3; text-align: right;">{{ item.relaType }}</span>
                                </p> -->
                            <!-- </div> -->
                            <div class="limiter" v-if="form.beforData.relaResultForms && form.beforData.relaResultForms.length > 0">
                                <div class="container-table">
                                    <div class="wrap-table">
                                        <div class="data-table ver1 m-b-110">
                                            <div class="table-head">
                                                <table>
                                                    <thead>
                                                        <tr class="row head">
                                                            <th class="cell column1">ID</th>
                                                            <th class="cell column2">歌曲名</th>
                                                            <th class="cell column3">匹配类型</th>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </div>

                                            <div class="table-body">
                                                <table>
                                                    <tbody>
                                                        <tr
                                                            v-for="(item, index) in form.beforData.relaResultForms"
                                                            :key="index"
                                                            class="row body"
                                                        >
                                                            <td class="cell column1">{{ item.songId }}</td>
                                                            <td class="cell column2">{{ item.songName }}</td>
                                                            <td class="cell column3">{{ item.relaType }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block" class="wrapper-right">
                        <el-form-item label="修改后" class="title"> </el-form-item>
                        <el-form-item label="ID:" :required="form.afterDate.id != form.beforData.id">
                            <el-input class="w" v-model="form.afterDate.id" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="歌手名:" :required="form.afterDate.actors.importName != form.beforData.actors.importName">
                            <el-input class="w" v-model="form.afterDate.actors.importName" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑名:" :required="form.afterDate.tblAlbum.name != form.beforData.tblAlbum.name">
                            <el-input class="w" v-model="form.afterDate.tblAlbum.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="歌曲名:" :required="form.afterDate.name != form.beforData.name">
                            <el-input class="w" v-model="form.afterDate.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="全拼:" :required="form.afterDate.namePinyinFull != form.beforData.namePinyinFull">
                            <el-input class="w" v-model="form.afterDate.namePinyinFull" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:" :required="form.afterDate.namePinyinShort != form.beforData.namePinyinShort">
                            <el-input class="w" v-model="form.afterDate.namePinyinShort" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="语言:" :required="form.afterDate.language != form.beforData.language">
                            <el-select
                                disabled
                                :clearable="true"
                                v-model="form.afterDate.language"
                                placeholder="请选择语言"
                                class="handle-select mr10 w"
                            >
                                <el-option
                                    v-for="(item, index) in languages"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="风格:"
                            :required="JSON.stringify([...form.afterDate.genre].sort()) != JSON.stringify([...form.beforData.genre].sort())"
                        >
                            <el-select
                                :clearable="false"
                                multiple
                                v-model="form.afterDate.genre"
                                placeholder=""
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in genres_3"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="歌曲别名:" :required="form.afterDate.aliasName != form.beforData.aliasName">
                            <el-input class="w" v-model="form.afterDate.aliasName" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="子标题:" :required="form.afterDate.subtitle != form.beforData.subtitle">
                            <el-input class="w" v-model="form.afterDate.subtitle" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="词作者:" :required="form.afterDate.lyricWriter != form.beforData.lyricWriter">
                            <el-input class="w" v-model="form.afterDate.lyricWriter" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="曲作者:" :required="form.afterDate.composer != form.beforData.composer">
                            <el-input class="w" v-model="form.afterDate.composer" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="插曲类型：" :required="form.afterDate.episodeType != form.beforData.episodeType">
                            <el-select disabled :clearable="true" v-model="form.afterDate.episodeType" class="handle-select mr10 w">
                                <el-option key="0" label="无" :value="0"></el-option>
                                <el-option key="1" label="配乐" :value="364"></el-option>
                                <el-option key="2" label="片尾曲" :value="365"></el-option>
                                <el-option key="3" label="插曲" :value="366"></el-option>
                                <el-option key="4" label="主题曲" :value="363"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否有伴奏：" :required="form.afterDate.accompanyFlag != form.beforData.accompanyFlag">
                            <el-select disabled :clearable="true" v-model="form.afterDate.accompanyFlag" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否精品：" :required="form.afterDate.excellentFlag != form.beforData.excellentFlag">
                            <el-select disabled :clearable="true" v-model="form.afterDate.excellentFlag" class="handle-select mr10 w">
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="安全类别：" :required="form.afterDate.blackFlag != form.beforData.blackFlag">
                            <el-select disabled :clearable="true" v-model="form.afterDate.blackFlag" class="handle-select mr10 w">
                                <el-option key="0" label="白名单" :value="false"></el-option>
                                <el-option key="1" label="黑名单" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="状态：" :required="form.afterDate.status != form.beforData.status">
                            <el-select disabled :clearable="true" v-model="form.afterDate.status" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item
                            label="试听开始(单位: s)："
                            :required="form.afterDate.tblListenDownloadModes.start != form.beforData.tblListenDownloadModes.start"
                        >
                            <el-input disabled class="w" v-model="form.afterDate.tblListenDownloadModes.start"></el-input>
                        </el-form-item>

                        <el-form-item
                            label="试听结束(单位: s)："
                            :required="form.afterDate.tblListenDownloadModes.end != form.beforData.tblListenDownloadModes.end"
                        >
                            <el-input disabled class="w" v-model="form.afterDate.tblListenDownloadModes.end"></el-input>
                        </el-form-item>

                        <el-form-item
                            label="打标签："
                            :required="
                                JSON.stringify([...form.afterDate.tagIds].sort()) != JSON.stringify([...form.beforData.tagIds].sort())
                            "
                        >
                            <!-- <el-select disabled :clearable="true" v-model="form.afterDate['打标签']" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select> -->

                            <el-cascader
                                disabled
                                :show-all-levels="true"
                                v-model="form.afterDate.tagIds"
                                class="w"
                                :options="tagList"
                                :props="{
                                    emitPath: false,
                                    multiple: true,
                                    checkStrictly: true,
                                    value: 'value',
                                    label: 'label',
                                    children: 'children'
                                }"
                                @change="handlechange"
                            >
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.label }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>

                        <el-form-item
                            label="关联MV"
                            :required="!compareObj(form.beforData.relaResultForms, form.afterDate.relaResultForms)"
                        >
                            <!-- <div style="overflow: auto; height: 164px; margin-top: 10px;">
                                <p
                                    v-if="form.afterDate.relaResultForms && form.afterDate.relaResultForms.length > 0"
                                    style="height: 32px; display: flex; justify-content: space-between; padding-right: 10px; margin-bottom: 1px; font-size: 12px;"
                                    v-for="(item, index) in form.afterDate.relaResultForms"
                                    :key="index"
                                >
                                    <span style=" background: rgba(0,0,0,.1);flex: 3; text-align: left;">{{ item.songId }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 4; text-align: center; margin: 0 10px 0">{{
                                        item.songName
                                    }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 3; text-align: right;">{{ item.relaType }}</span>
                                </p>
                            </div> -->
                            <div class="limiter" v-if="form.afterDate.relaResultForms && form.afterDate.relaResultForms.length > 0">
                                <div class="container-table">
                                    <div class="wrap-table">
                                        <div class="data-table ver1 m-b-110">
                                            <div class="table-head">
                                                <table>
                                                    <thead>
                                                        <tr class="row head">
                                                            <th class="cell column1">ID</th>
                                                            <th class="cell column2">歌曲名</th>
                                                            <th class="cell column3">匹配类型</th>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </div>

                                            <div class="table-body">
                                                <table>
                                                    <tbody>
                                                        <tr
                                                            v-for="(item, index) in form.afterDate.relaResultForms"
                                                            :key="index"
                                                            class="row body"
                                                        >
                                                            <td class="cell column1">{{ item.songId }}</td>
                                                            <td class="cell column2">{{ item.songName }}</td>
                                                            <td class="cell column3">{{ item.relaType }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <!-- 表格部分 -->
            <div class="table">
                <!-- 付费模式 -->
                <el-table
                    :cell-style="{ color: '#666', 'font-size': '14px' }"
                    :data="tableData_l"
                    border
                    resizable
                    ref="multipleTable"
                    :header-cell-style="rowClass"
                >
                    <el-table-column prop="type" label="类型" align="left"></el-table-column>

                    <el-table-column label="预览" align="center">
                        <template slot-scope="scope">
                            <a
                                @click="handleClick_l($event, scope.row)"
                                style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
                            >
                                <svg-icon v-if="scope.row.preview == 0" data_iconName="u1048" className="u1048_icon" />
                                <!-- 默认显示播放按钮 -->
                                <svg-icon
                                    v-if="
                                        scope.row.preview == 1 && Object.keys(form).length > 0 && form.beforData.tblSongfiles.filePath != ''
                                    "
                                    data_iconName="播放"
                                    className="play_icon"
                                />
                                <!-- 自定义 3 为暂停状态 -->
                                <svg-icon
                                    v-if="
                                        scope.row.preview == 3 && Object.keys(form).length > 0 && form.beforData.tblSongfiles.filePath != ''
                                    "
                                    data_iconName="暂停"
                                    className="pause_icon"
                                />

                                <svg-icon v-if="scope.row.preview == 2" data_iconName="u1049" className="u1049_icon" />
                            </a>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 表格 -->
                <el-table
                    :cell-style="{ color: '#666', 'font-size': '14px' }"
                    :data="tableData_r"
                    border
                    resizable
                    ref="multipleTable"
                    :header-cell-style="rowClass"
                >
                    <el-table-column prop="type" label="类型" align="left"></el-table-column>

                    <el-table-column label="备注" align="center">
                        <template slot-scope="scope">
                            <el-input
                                placeholder=""
                                style="height: 100%; width: 100%"
                                v-if="scope.row.type === 'LRC-LRC'"
                                v-model="form.remark"
                                type="text"
                            ></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column label="预览" align="center">
                        <template slot-scope="scope">
                            <a
                                @click="handleClick_r($event, scope.row)"
                                style="color: black; display: inline-block; cursor: pointer; font-size: 16px"
                            >
                                <svg-icon v-if="scope.row.preview == 0" data_iconName="u1048" className="u1048_icon" />
                                <!-- 默认显示播放按钮 -->
                                <svg-icon
                                    v-if="
                                        scope.row.preview == 1 && Object.keys(form).length > 0 && form.afterDate.tblSongfiles.filePath != ''
                                    "
                                    data_iconName="播放"
                                    className="play_icon"
                                />
                                <!-- 自定义 3 为暂停状态 -->
                                <svg-icon
                                    v-if="
                                        scope.row.preview == 3 && Object.keys(form).length > 0 && form.afterDate.tblSongfiles.filePath != ''
                                    "
                                    data_iconName="暂停"
                                    className="pause_icon"
                                />

                                <svg-icon v-if="scope.row.preview == 2" data_iconName="u1049" className="u1049_icon" />
                            </a>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <a href="javascript:void(0)" class="btn">
                                    上传文件
                                    <input
                                        type="file"
                                        :accept="accept"
                                        @click="handleClick_r($event, scope.row)"
                                        id="file"
                                        name="file"
                                        @change="uploadFile($event, scope.row)"
                                        ref="target"
                                    />
                                </a>
                            </template>
                        </el-table-column> -->
                </el-table>
            </div>
            <!-- //表格部分 -->

            <el-row>
                <el-button type="primary" @click="handlePass">通过</el-button>
                <el-button @click="handleRefuse">拒绝</el-button>
            </el-row>
        </div>
        <audio ref="audio" v-if="Object.keys(form).length > 0" :src="form.beforData.tblSongfiles.filePath"></audio>

        <audio ref="audio_" v-if="Object.keys(form).length > 0" :src="form.afterDate.tblSongfiles.filePath"></audio>

        <el-dialog title="备注" :visible.sync="visible" width="30%">
            <el-form ref="reason" :model="reason" label-width="70px">
                <el-form-item label="">
                    <el-input
                        v-model="reason.remark"
                        maxlength="120"
                        show-word-limit
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 15 }"
                        placeholder="请填写拒绝原因"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="refuse">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import { genres_3 } from '@/components/common/';
  import { languages } from '@/components/common/';
  import { mapGetters, mapMutations, mapActions } from 'vuex';
  // import { v4 as uuidv4 } from 'uuid';
  // import { debounce, throttle } from '@/utils/utils.js';
  import { Base64 } from 'js-base64';
  // import Lyric from 'lyric-parser';
  import Lyric from '@/components/common/js/Lyric.js';
  export default {
      name: 'SongChecked',

      components: {},
      watch: {
          // '$route.query'(a, b) {
          //     console.log(a, b);
          //     if (a.id && b.id && a.id != b.id) {
          //         this.getDataById(this.$route.query.id);
          //     }
          // },
          '$route.path'(a, b) {
              console.log(a, b);
              if (a != '/song/checked') {
                  this.tableData_l[this.tableData_l.length - 1].preview = 1;
              }
          }
      },
      data() {
          return {
              tagList: [],
              accept: '.lrc',
              baseUrl: process.env.VUE_APP_SRC1,
              lyricString_l: '',
              lyricString_r: '',
              reason: {
                  remark: ''
              },
              visible: false,
              genres_3,
              languages,
              tableData_l: [
                  {
                      type: 'LRC-LRC',
                      describe: '动态歌词',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'LRC-LRC-TRANS',
                      describe: '翻译歌词',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'LRC-TXT',
                      describe: '文本格式',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'FLAC-1000K-FTD',
                      describe: '无损品质',
                      preview: '1',
                      url: ''
                  }
              ],
              tableData_r: [
                  {
                      type: 'LRC-LRC',
                      describe: '动态歌词',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'LRC-LRC-TRANS',
                      describe: '翻译歌词',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'LRC-TXT',
                      describe: '文本格式',
                      preview: '0',
                      url: ''
                  },
                  {
                      type: 'FLAC-1000K-FTD',
                      describe: '无损品质',
                      preview: '1',
                      url: ''
                  }
              ],

              form: {}
          };
      },
      destroyed() {
          if (!this.tagsList.some((item) => item.name === 'SongChecked')) {
              localStorage.removeItem('id_song');
          } else {
              //  什么都不做
          }
      },
      activated() {
          if (this.$route.query.id) {
              this.getDataById(this.$route.query.id);
              this.getTagData();
              this.form = {};
          }
      },
      computed: {
          ...mapGetters(['tagsList'])
      },
      methods: {
          compareObj(oldData, newData) {
              let isObject = function (obj) {
                  return Object.prototype.toString.call(obj) === '[object Object]';
              };
              // 判断此对象是否是Object类型
              let isArray = function (arr) {
                  return Object.prototype.toString.call(arr) === '[object Array]';
              };

              // 比较两个对象是否相等
              let compare = function (oldData, newData) {
                  console.log(oldData, newData);
                  // 类型为基本类型时,如果相同,则返回true
                  if (oldData === newData) return true;
                  if (isObject(oldData) && isObject(newData) && Object.keys(oldData).length === Object.keys(newData).length) {
                      // 类型为对象并且元素个数相同
                      // 遍历所有对象中所有属性,判断元素是否相同
                      for (let key in oldData) {
                          if (oldData.hasOwnProperty(key)) {
                              if (!compare(oldData[key], newData[key])) {
                                  // 对象中具有不相同属性 返回false
                                  return false;
                              }
                          }
                      }
                  } else if (isArray(oldData) && isArray(oldData) && oldData.length === newData.length) {
                      // 附加代码 对数组统一排序
                      oldData = [...oldData].sort();
                      newData = [...newData].sort();
                      // 附加代码 对数组统一排序

                      // 类型为数组并且数组长度相同
                      for (let i = 0, length = oldData.length; i < length; i++) {
                          if (!compare(oldData[i], newData[i])) {
                              // 如果数组元素中具有不相同元素,返回false
                              return false;
                          }
                      }
                  } else {
                      // 其它类型,均返回false
                      return false;
                  }
                  // 走到这里,说明数组或者对象中所有元素都相同,返回true
                  return true;
              };

              return compare(oldData, newData);
          },
          handlechange(value) {
              console.log(value); // 这里的值会输出 value 的一个数组
          },
          async getTagData() {
              try {
                  let url = '/tag/tagAll';
                  let { data: res } = await this.$http[2].get(url, {
                      params: {
                          type: 1
                          // page: this.query.pageIndex,
                          // size: this.query.pageSize
                      }
                  });
                  // console.log('标签列表', res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  if (res.data && res.data.length && res.data.length != 0) {
                      res.data.map((v) => {
                          v.disabled = true;
                      });
                      var ret = this.formatData(res.data);
                      console.log('ret', ret);
                      this.tagList = ret;
                  } else {
                      this.tagList = [];
                  }
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          formatData(array) {
              for (let item of array) {
                  item.value = item.id;
                  item.label = item.description;
                  item.children = [];
                  // 删除返回的没用的属性
                  delete item.type;
                  delete item.createTime;
                  delete item.description;
                  delete item.groupId;
                  delete item.id;
                  delete item.name;
                  delete item.status;
                  delete item.updateTime;
                  delete item.pid;

                  if (item.tblTags && item.tblTags.length != 0) {
                      item.children = item.tblTags;
                      // 删除返回的没用的属性
                      delete item.tblTags;
                      this.formatData(item.children);
                  } else {
                      delete item.children;
                  }
              }
              return array;
          },
          // equalArray() {
          //     return JSON.stringify(this.form.afterDate.genre.sort()) != JSON.stringify(this.form.beforData.genre.sort());
          // },
          // ...mapActions(['setSongInfoData_']),
          ...mapMutations(['SET_TAGSLIST', 'SET_QUKUSONG_DATA']),

          // 获取歌曲信息
          async getDataById(cid) {
              try {
                  let url = '/song/info';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          id: cid
                      })
                  });
                  console.log(res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  var ret = { ...res.data };
                  // 筛选需要的字段
                  if (ret.beforData) {
                      let requiredFields = {
                          id: '',
                          actors: [],
                          tblAlbum: {},
                          name: '',
                          namePinyinFull: '',
                          namePinyinShort: '',
                          language: '',
                          genre: '',
                          aliasName: '',
                          subtitle: '',
                          lyricWriter: '',
                          composer: '',
                          episodeType: '',
                          accompanyFlag: false,
                          excellentFlag: 0,
                          blackFlag: false,
                          status: '',
                          tblListenDownloadModes: [],
                          tagIds: [],
                          tblLyrics: [],
                          tblSongfiles: {},
                          relaResultForms: []
                      };
                      ret.beforData = this.$chooseFields(ret.beforData, Object.keys(requiredFields), {}, requiredFields);
                  } else {
                      ret.beforData = {};
                  }

                  // 中间处理:
                  // 拼接歌手
                  if (ret.beforData.actors.length > 0) {
                      ret.beforData.actors.importName = '';
                      ret.beforData.actors.map((item) => {
                          ret.beforData.actors.importName += item.importName + '/';
                      });
                      ret.beforData.actors.importName = ret.beforData.actors.importName.slice(0, -1);
                  } else {
                      // ret.beforData.actors = [];  chooseFields方法 已经给过默认值 []
                      ret.beforData.actors.importName = '';
                  }

                  // 风格
                  ret.beforData.genre = ret.beforData.genre ? [...new Set(ret.beforData.genre.split(','))] : [];
                  // 试听
                  if (ret.beforData.tblListenDownloadModes.length > 0) {
                      ret.beforData.tblListenDownloadModes.start = ret.beforData.tblListenDownloadModes[0].listenSegmentOffset;
                      ret.beforData.tblListenDownloadModes.end =
                          ret.beforData.tblListenDownloadModes[0].listenSegmentOffset +
                          ret.beforData.tblListenDownloadModes[0].listenSegmentSecond;
                  } else {
                      ret.beforData.tblListenDownloadModes[0] = {};
                  }
                  // 歌词
                  if (ret.beforData.tblLyrics.length > 0) {
                      var lyricArr = this.formatLyric(ret.beforData.tblLyrics[0].content);
                      this.lyricString_l = '';
                      for (var i = 0; i < lyricArr.length; i++) {
                          this.lyricString_l += `<p style='margin:0; padding:0; text-align: left;'>${lyricArr[i]}</p>`;
                      }
                  } else {
                      ret.beforData.tblLyrics[0] = {};
                  }

                  // mp3
                  ret.beforData.tblSongfiles.filePath = ret.beforData.tblSongfiles.filePath
                      ? `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${ret.beforData.tblSongfiles.filePath}`
                      : '';

                  if (ret.afterDate) {
                      let requiredFields = {
                          id: '',
                          actors: [],
                          tblAlbum: {},
                          name: '',
                          namePinyinFull: '',
                          namePinyinShort: '',
                          language: '',
                          genre: '',
                          aliasName: '',
                          subtitle: '',
                          lyricWriter: '',
                          composer: '',
                          episodeType: '',
                          accompanyFlag: false,
                          excellentFlag: 0,
                          blackFlag: false,
                          status: '',
                          tblListenDownloadModes: [],
                          tagIds: [],
                          afterTblLyrics: '',
                          tblSongfiles: {},
                          remark: '',
                          relaResultForms: []
                      };
                      ret.afterDate = this.$chooseFields(ret.afterDate, Object.keys(requiredFields), {}, requiredFields);
                  } else {
                      ret.afterDate = {};
                  }

                  // 中间处理:
                  // 拼接歌手
                  if (ret.afterDate.actors.length > 0) {
                      ret.afterDate.actors.importName = '';
                      ret.afterDate.actors.map((item) => {
                          ret.afterDate.actors.importName += item.importName + '/';
                      });
                      ret.afterDate.actors.importName = ret.afterDate.actors.importName.slice(0, -1);
                  } else {
                      // ret.afterDate.actors = [];  chooseFields方法 已经给过默认值 []
                      ret.afterDate.actors.importName = '';
                  }

                  // 风格
                  ret.afterDate.genre = ret.afterDate.genre ? [...new Set(ret.afterDate.genre.split(','))] : [];
                  // 试听
                  if (ret.afterDate.tblListenDownloadModes.length > 0) {
                      ret.afterDate.tblListenDownloadModes.start = ret.afterDate.tblListenDownloadModes[0].listenSegmentOffset;
                      ret.afterDate.tblListenDownloadModes.end =
                          ret.afterDate.tblListenDownloadModes[0].listenSegmentOffset +
                          ret.afterDate.tblListenDownloadModes[0].listenSegmentSecond;
                  } else {
                      ret.afterDate.tblListenDownloadModes[0] = {};
                  }

                  // 歌词

                  if (ret.afterDate.afterTblLyrics != '') {
                      var lyricArr_ = this.formatLyric(ret.afterDate.afterTblLyrics);
                      this.lyricString_r = '';
                      for (var i = 0; i < lyricArr_.length; i++) {
                          this.lyricString_r += `<p style='margin:0; padding:0; text-align: left;'>${lyricArr_[i]}</p>`;
                      }
                  }

                  // mp3
                  ret.afterDate.tblSongfiles.filePath = ret.afterDate.tblSongfiles.filePath
                      ? `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${ret.afterDate.tblSongfiles.filePath}`
                      : '';

                  console.log(ret);

                  this.form = ret;
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },
          setTag() {},
          rowClass({ row, rowIndex }) {
              return 'height: 26px;background-color:#409EFF !important;color:#fff; text-align: center;';
          },

          handleClick_l(e, row) {
              console.log(e, row);

              if (row.type == 'FLAC-1000K-FTD') {
                  // 播放音乐
                  this.togglePlaying_l(e, row);
              } else {
                  this.open_l();
              }
          },

          handleClick_r(e, row) {
              console.log(e, row);

              if (row.type == 'FLAC-1000K-FTD') {
                  // 播放音乐
                  this.togglePlaying_r(e, row);
              } else {
                  this.open_r();
              }
          },
          open_l() {
              this.$alert(
                  `<div style='overflow : auto;  height: 500px;'>` + this.lyricString_l + `</div>`,
                  '歌曲名：' + this.form.beforData.name + ' 歌手名：' + this.form.afterDate.actors.importName,
                  {
                      dangerouslyUseHTMLString: true,
                      confirmButtonText: '关闭'
                  }
              );
          },
          open_r() {
              this.lyricString_r = this.lyricString_r || this.lyricString_l;
              this.$alert(
                  `<div style='overflow : auto;  height: 500px;'>` + this.lyricString_r + `</div>`,
                  '歌曲名：' + this.form.afterDate.name + ' 歌手名：' + this.form.afterDate.actors.importName,
                  {
                      dangerouslyUseHTMLString: true,
                      confirmButtonText: '关闭'
                  }
              );
          },
          togglePlaying_l(e, row) {
              console.dir(this.$refs.audio.paused);
              var audio = this.$refs.audio;
              var audio_ = this.$refs.audio_;
              if (this.$refs.audio.paused) {
                  // 暂停变播放
                  audio.play();
                  row.preview = '3';
                  audio_.pause();
                  this.tableData_r[this.tableData_r.length - 1].preview = 1;
              } else {
                  // 播放变暂停
                  row.preview = '1';
                  audio.pause();
              }
              this.tableData_l = [...this.tableData_l];
              this.tableData_r = [...this.tableData_r];
          },
          togglePlaying_r(e, row) {
              console.dir(this.$refs.audio_.paused);
              var audio_ = this.$refs.audio_;
              var audio = this.$refs.audio;
              if (this.$refs.audio_.paused) {
                  // 暂停变播放
                  audio_.play();
                  row.preview = '3';
                  audio.pause();
                  this.tableData_l[this.tableData_l.length - 1].preview = 1;
              } else {
                  // 播放变暂停
                  row.preview = '1';
                  audio_.pause();
              }
              this.tableData_r = [...this.tableData_r];
              this.tableData_l = [...this.tableData_l];
          },
          formatLyric(str) {
              // 去除歌词开头时间
              // console.log(str);
              // console.log(new Lyric(str));
              // str = new Lyric(str).lines.map(item => item.txt + '\r\n').join('');
              // console.log(str);
              if (!str) {
                  return;
              }
              var lyricArr = str.split(/[\r\n\r\n]+/);
              lyricArr.forEach((item, index) => {
                  if (!item) {
                      lyricArr.splice(index, 1); //删除空项
                  }
              });
              return lyricArr;
          },
          uploadFile(e, row) {
              var event = e || window.event;
              var target = event.target || e.srcElement;
              console.dir(target);
              console.log(e, row);

              if (row.type == 'FLAC-1000K-FTD') {
                  // 上传mp3

                  this.songfile = target.files[0];
              } else {
                  // 上传歌词文件
                  var lyricFileUrl = this.$getObjectURL(target.files[0]);
                  console.log('歌词', lyricFileUrl);
                  var lyricContent = this.$getFileContent(lyricFileUrl);
                  var lyricArr = this.formatLyric(lyricContent);
                  this.lyricString_l = '';
                  for (var i = 0; i < lyricArr.length; i++) {
                      this.lyricString_l += `<p style='margin:0; padding:0; text-align: left;'>${lyricArr[i]}</p>`;
                  }

                  this.lrcfile = target.files[0];
              }
          },

          handlePass() {
              this.$confirm('确定要通过吗？', '提示', {
                  type: 'warning'
              })
                  .then(() => {
                      this.pass();
                  })
                  .catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消通过'
                      });
                  });
          },

          async pass() {
              try {
                  let url = '/song/update';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          id: this.$route.query.id,
                          remark: this.form.remark
                      }),
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  console.log(res);
                  if (res.code != '0000') {
                      throw new Error(res.message);
                  }
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.$closeActiveTag.call(this);
                  this.$router.replace({
                      path: '/song/admin'
                  });
                  this.SET_QUKUSONG_DATA([]);
              } catch (err) {
                  console.dir(err);
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          },

          handleRefuse() {
              this.visible = true;
              this.reason.remark = '';
          },
          async refuse() {
              try {
                  let url = '/song/auditless';
                  let { data: res } = await this.$http[0].get(url, {
                      params: this.$removeField({
                          id: this.$route.query.id,
                          remark: this.reason.remark
                      }),
                      headers: {
                          name: localStorage.getItem('ms_username')
                      }
                  });
                  this.visible = false;
                  this.$message.success({
                      message: res.message,
                      duration: 1500
                  });
                  this.$closeActiveTag.call(this);
                  this.$router.replace({
                      path: '/song/admin'
                  });
                  this.SET_QUKUSONG_DATA([]);
              } catch (err) {
                  console.dir(err);
                  this.visible = false;
                  this.$message.error({
                      message: err.message,
                      duration: 1500
                  });
              }
          }
      }
  };
</script>

<style lang="scss">
  .el-message-box__wrapper {
      .el-message-box {
          width: 500px !important;
      }
  }

  #song_checked {
      .limiter * {
          margin: 0px;
          padding: 0px;
          box-sizing: border-box;
      }
      /*==================================================================
    [ 表格宽度 ]*/
      .limiter {
          ::-webkit-scrollbar {
              display: none;
          }

          // 　　width: 80%;
          margin: 10px auto 0;
          /*---------------------------------------------*/

          .container-table {
              width: 100%;
              background: #fff;
              // padding: 0px 30px;
          }

          .wrap-table {
              width: 100%;
          }

          .data-table {
              background-color: #fff;
          }

          table {
              width: 100%;
              border-collapse: collapse;
          }

          th {
              text-align: center;
              font-weight: bold;
              border: 1px solid gray;
          }

          td {
              font-weight: unset;
              text-align: center;
              border: 1px solid gray;
          }

          /*==================================================================
    [ 单元格宽度 ]*/
          .column1 {
              width: 20%;
          }

          .column2 {
              // width: 60%;
              width: auto;
          }

          .column3 {
              width: 40%;
          }

          // .column4 {
          //     width: 19%;
          // }

          // .column5 {
          //     width: 13%;
          // }
          /*---------------------------------------------*/

          .table-head th {
              padding-top: 10px;
              padding-bottom: 10px;
          }

          .table-body td {
              height: 46px;
          }

          /*==================================================================
    [ Fix header ]*/
          .data-table {
              position: relative;
              padding-top: 46px;
          }

          .table-head {
              position: absolute;
              width: 100%;
              top: 0;
              left: 0;
          }

          .table-body {
              max-height: 231px;
              overflow: auto;
              width: 100%;
          }

          /*==================================================================
    [ Ver1 ]*/

          .data-table.ver1 th {
              font-family: Lato-Bold;
              font-size: 18px;
              color: #333;
              background-color: #e5e5e5;
          }

          .data-table.ver1 td {
              font-family: Lato-Regular;
              font-size: 14px;
              color: #808080;
          }
      }
      .handle-box {
          margin-bottom: 20px;
      }

      .handle-select {
          width: 185px;
      }

      .handle-input {
          width: 300px;
          display: inline-block;
      }

      .red {
          color: #ff0000;
      }
      .mr10 {
          margin-right: 10px;
      }
      .table-td-thumb {
          display: block;
          margin: auto;
          width: 40px;
          height: 40px;
      }
      .w {
          // width: 470px !important;
          width: 100% !important;
      }

      .wrapper {
          display: grid;
          grid-template-columns: 50% 50%;
          justify-content: center;
          justify-items: center;
          grid-auto-flow: row;
          align-items: flex-start;
          align-content: flex-start;
          .title {
              .el-form-item__label {
                  color: #0099ff;
                  font-size: 16px;
                  font-weight: bold;
                  text-decoration: underline;
                  cursor: pointer;
              }
          }
          .wrapper-left {
              width: 100%;
              padding-right: 50px;
              .el-form-item {
                  .el-form-item__label-wrap {
                      margin-left: 0px !important;
                      width: 160px;
                      text-align: right;
                  }
                  .el-form-item__content {
                      margin-left: 160px !important;
                  }
              }
          }
          .wrapper-right {
              width: 100%;
              .el-form-item {
                  .el-form-item__label-wrap {
                      margin-left: 0px !important;
                      width: 160px;
                      text-align: right;
                  }
                  .el-form-item__content {
                      margin-left: 160px !important;
                  }
              }
          }
      }

      .table {
          width: 100%;
          text-align: center;
          margin-bottom: 10px;
          font-size: 14px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .el-table {
              display: inline-block;
              width: 100%;
              &:first-of-type {
                  margin-right: 40px;
                  margin-left: 30px;
              }
              &:nth-of-type(2) {
                  margin-left: 40px;
              }
              .u1048_icon {
                  width: 28px;
                  height: 34px;
              }
              .play_icon,
              .pause_icon {
                  width: 43px;
                  height: 37px;
              }
              .u1049_icon {
                  width: 22px;
                  height: 9px;
              }
              .btn {
                  position: relative;
                  display: inline-block;
                  text-align: center;
                  color: #fff;
                  text-decoration: none;
                  width: 80px;
                  height: 32px;
                  line-height: 32px;
                  background: #409eff;
                  border-radius: 3px;
                  font-size: 12px;
                  vertical-align: middle;
                  margin-left: 10px;
              }
              input[name='file'] {
                  opacity: 0;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
              }
          }
      }
      .el-row {
          // padding-left: 10%;
          text-align: right;
      }
  }
</style>
